<template>
    <el-dialog title="管理子账号" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="10vh" :before-close="beforeClose" :close-on-click-modal="true">
        <div class="dialogVue">
            <div class="inpVue" style="margin-top: 0;">
                <div class="label">子账号</div>
                <el-input v-model="detail.userName" readonly style="width: 100%; margin-top: 10px;"></el-input>
            </div>
            <div class="inpVue">
                <div class="label">分配微信数(个)</div>
                <el-input v-model="detail.wechatNum" style="width: 100%; margin-top: 10px;" placeholder="请输入分配微信数" type="number"  class="def-input-number"></el-input>
                <div style="color: #999; font-size: 12px; padding-top: 10px; text-align: right">剩余微信：{{ userPackageInfo.wechatNum }}个</div>
            </div>
            <div class="inpVue">
                <div class="label">分配token数(个)</div>
                <el-input v-model="detail.tokenNum" style="width: 100%; margin-top: 10px;" placeholder="请输入分配token数" type="number"  class="def-input-number"></el-input>
                <div style="color: #999; font-size: 12px; padding-top: 10px; text-align: right">剩余token数: {{ userPackageInfo.tokenNum }}个</div>
            </div>
            <div class="tipTetx">提示：分配给子账号后将不可以更改，分配额度请谨慎选择</div>
            <div class="cBtn margin30" @click="submitFun">
                <span class="el-icon-loading" v-if="loading"></span>
                <span v-else>提交</span>
            </div> 
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from "@/common/tools"
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState({
            userPackageInfo: state=> state.userPackageInfo
        })
    },
    data(){
        return {
            detail: {},
            loading: false,
        }
    },
    methods: {
        getDetail(id){
            this.$post("/front/child/childDetail", { id }).then(res=>{
                if(res.data.code===0) {
                    this.detail = res.data.obj
                    console.log(this.detail)
                }
            })
        },
        beforeClose(){
            this.detail = {}
            this.$emit("beforeClose")
        },

        // 提交
        submitFun(){
            if(!this.detail.wechatNum || this.detail.wechatNum<0) return toast(1, "请输入正确分配微信数量")
            if(!this.detail.tokenNum || this.detail.tokenNum<0) return toast(1, "请输入正确分配微信数量")
            if(this.detail.wechatNum>this.userPackageInfo.wechatNum) return toast(1, "可分配微信数不足")
            if(this.detail.tokenNum>this.userPackageInfo.tokenNum) return toast(1, "可分配token数不足")
            if(this.loading) return
            this.loading = true
            this.$post("/front/child/setChildInfo", {
                id: this.detail.id,
                wechatNum: this.detail.wechatNum,
                tokenNum: this.detail.tokenNum
            }).then(res=>{
                if(res.data.code===0) {
                    this.loading = false
                    toast(0, "分配成功")
                    this.beforeClose()
                    this.$emit("callback")
                    this.$store.dispatch("getUserPackageInfo")
                }else{
                    this.loading = false
                    toast(1, res.data.msg)
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px !important;
    border-radius: 10px;
    box-sizing: border-box
}
:deep(.el-dialog__body) {
    padding: 0 20px 20px;
}
:deep(.inpVue) {
    /* 隐藏el-input的上下箭头 */
    .el-input__inner[type="number"]::-webkit-inner-spin-button,
    .el-input__inner[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
    }
    /* 对于非WebKit浏览器，可以尝试以下方法 */
    .el-input__inner[type="number"] {
        -moz-appearance: textfield !important; /* Firefox */
    }
}
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .inviteVue {
        width: 100%;
        height: 40px;
        .invite {
            flex: 1;
            height: 40px;
            border: 1px solid #DCDFE6;
            padding-left: 15px;
            color: #333;
            margin-left: 10px;
            border-radius: 4px;
            line-height: 40px;
        }
        .label {
            width: 170px;
        }
    }
    .cBtn {
        width: 320px;
        height: 50px;
        border-radius: 6px;
        line-height: 50px;
        text-align: center;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
        span {
            color: #fff;
        }
    }
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 12px;
        }
    }
    .tipTetx {
        color: #999;
        padding: 30px 0 0;
        font-size: 12px;
        line-height: 1.4;
        span {
            color: #999;
            font-size: 12px;
        }
    }
}
</style>